import React, { useState, useEffect, useCallback } from 'react';
import { List } from 'react-vant'
import { Toast, Input } from 'antd-mobile'
import { useLocation } from 'react-router-dom';
import Loading from '@/components/Loading';
import HeadTop from '@/components/HeadTop';
import ListItem from '@/components/ListItemCheck';
import FooterCheck from '@/components/FooterCheck/index'
import PickerSelect from '@/components/PickerSelect';
import { menuTab, listFields, listdata } from './const';
import { updateStatusList, getStatusList } from "./const";
import './index.less'
import ApiIndex from '@/api/approve.js';
import ApiIndexs from '@/api/equipment.js';
const Index = ({ history }) => {
    const [statusList, setStatusList] = useState(getStatusList());
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(false);
    const [finished, setFinished] = useState(false);
    const [activeTab, setactiveTab] = useState('1')  //tab切换
    const [isAllcheck, setisAllcheck] = useState(false); // 全选状态
    const [selectedIds, setSelectedIds] = useState([])
    const [value, setValue] = useState('')
    const [value2, setValue2] = useState('')

    const location = useLocation();
    const title = new URLSearchParams(location.search).get('title');

    const [basicColumns, setbasicColumns] = useState([
        [
            { label: '上午', value: 'am' },
            { label: '下午', value: 'pm' },
        ],
    ]);  // 设备类型


    useEffect(() => {
        getRequestData()
        getDic()
        // console.log(currenFlag,333)
    }, [])
   // 字典
    const getDic = () => {
        ApiIndexs.dictDetailsList({ code:'PICKING_TYPE' }).then(res => {
            if (res.data.code == 0) {
                updateStatusList(res.data.data);
                setStatusList(getStatusList()); 
            }
        })
    }
    const getRequestData = async () => {
        
        // setLoading(true)
        // setTimeout(() => {
        //     const newList = listdata.map(el => ({ ...el, check: false }));
        //     setList(newList)
        //     setFinished(true);
        //     setLoading(false)
        // }, 500);
        setLoading(true)
        let params = {
            page: 1,
            size: 9999,
            type: 'RECEIVE',
            status:'WAIT_CHECK',
            createUserName:value || ''

        }
        let res = await ApiIndex.approvalToolIoRecord(params)
        setLoading(false)
        if (res.data.code) {
            Toast.show({
                content: '请求失败:' + res.data.msg,
            })
            return
        }
        let list = res.data.data.records
        const newList = list.map(el => ({ ...el, check: false }));
        setList(newList)
        setFinished(true)
        setLoading(false)
        setSelectedIds([])
    }


    const handleSubmitBtn = (type) => {
        setLoading(true)
        ApiIndex.approvalConfirmClaim(selectedIds).then(res =>{
            console.log(res,222)
            if(res.data.success){
                // console.log(332)
                setLoading(false);
                getRequestData()
                Toast.show({
                    content: '操作成功',
                })
            }
            
        })
        // setTimeout(() => {
        //     setLoading(false)
        // }, 500);
    }

    // const itemHandleCheck = (item) => {
    //     const newList = list.map(el =>
    //         el.id === item.id ? { ...el, check: !el.check } : el
    //     );
    //     setList(newList);

    //     const allChecked = newList.every(el => el.check == true);
    //     console.log(allChecked, 'allChecked')
    //     setisAllcheck(allChecked);
    // }
    const itemHandleCheck = (item) => {
        // 更新列表项的选中状态
        const newList = list.map(el =>
            el.no === item.no ? { ...el, check: !el.check } : el
        );
        const newSelectedIds = newList.reduce((acc, currentItem) => {
            if (currentItem.check && currentItem.no === item.no) {
                return [...acc, currentItem.no];
            } else if (!currentItem.check && currentItem.no === item.no) {
                return acc.filter(no => no !== currentItem.no);
            }
            return acc;
        }, [...selectedIds]);
        
        setList(newList);
        setSelectedIds(newSelectedIds);
        // 更新全选状态
        const allChecked = newList.every(el => el.check);
        setisAllcheck(allChecked);
    }
    const handlesetAllcheck = (e) => {
        let newSelectedIds = []
        if(e){
             newSelectedIds = list.map(item => item.no)
        }else {
            newSelectedIds = []
        }
        setSelectedIds(newSelectedIds);
        const newList = list.map(el => ({ ...el, check: e }));
        setList(newList);
        setisAllcheck(e);
    };
    const personClick =() =>{
        getRequestData()
    }
    const setSelectVal = (v) => {
        console.log(v)
    }

    return (
        <div className='page-wrapper'>
            {
                loading ? <Loading></Loading> : null
            }
            <HeadTop
                title={title}
                history={history}
            ></HeadTop>
            <div className="select-pan">
                {/* <PickerSelect
                    placeholderTxt="请选择工区"
                    basicColumns={basicColumns}
                    setSelectVal={(e) => setSelectVal('1', e)}
                ></PickerSelect> */}
                <Input
                    placeholder='请输入申请人'
                    value={value}
                    onEnterPress={personClick}
                    className='select-line'
                    onChange={val => {
                        setValue(val)
                    }}></Input>
                <div style={{ height: 6 }}></div>
                {/* <Input
                    placeholder='请输入采购单'
                    value={value2}
                    className='select-line'
                    onChange={val => {
                        setValue2(val)
                    }}></Input> */}
            </div>

            <div className="page-body" style={{ padding: 15 }}>
                <List finished={finished} errorText='请求失败，点击重新加载'>
                    {
                        list.map(el => <ListItem
                            key={el.id}
                            item={el}
                            listFields={listFields}
                            emitCheck={itemHandleCheck}
                        ></ListItem>)
                    }
                    {finished ? <div className='loadingTxt'>无更多数据</div> : null}
                </List>
            </div>
            <FooterCheck
                hasCheck={true}
                isAllcheck={isAllcheck}
                sureBtnTxt="批量审核"
                emitSetAllcheck={handlesetAllcheck}
                emitSubmitBtn={handleSubmitBtn}></FooterCheck>
        </div>
    );
}

export default Index;
